<section class="component">
  <h3 id="scrollbar">Scrollbar</h3>
  <div>
    <blockquote>
      A control that allows users to scroll the content of a window, either vertically or horizontally.

      <footer>&mdash; <a href="https://docs.microsoft.com/en-us/windows/win32/uxguide/glossary#s">
          Microsoft Windows User Experience Glossary</a></footer>
    </blockquote>

    <p>
      To override the browser scrollbar's system styling for a particular section, add a <code>has-scrollbar</code>
      class to the container element.
    </p>

    <p>
      Note that this only works with WebKit-based browsers.
    </p>

    <%- example(`
    <div class="has-scrollbar" style="width: 300px; height: 150px; overflow: auto">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh massa, viverra non velit vitae,
      scelerisque venenatis risus. Sed posuere risus tellus, sit amet vehicula nunc venenatis ut.
      Nunc convallis augue eget odio imperdiet, eu consequat massa fringilla consectetur eleifend.
      Curabitur in egestas justo, vel fermentum ante. Lorem ipsum dolor sit amet, consectetur elit.
      Cras ullamcorper non nibh et placerat. Nullam ornare lectus eget consequat dignissim.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh massa, viverra non velit vitae,
      scelerisque venenatis risus. Sed posuere risus tellus, sit amet vehicula nunc venenatis ut.
      Nunc convallis augue eget odio imperdiet, eu consequat massa fringilla consectetur eleifend.
      Curabitur in egestas justo, vel fermentum ante. Lorem ipsum dolor sit amet, consectetur elit.
      Cras ullamcorper non nibh et placerat. Nullam ornare lectus eget consequat dignissim.
    </div>
  `) %>
  </div>
</section>